<template>
  <component
      is="a-modal"
      v-model:visible="visible"
      :width="1200"
      :title="title"
      :mask-closable="false"
      :ok-loading="loading"
      @cancel="close"
      @before-ok="submit"
  >
    <!-- 详情信息展示 -->
    <div class="detail-row">
      <div class="detail-label">留言分类</div>
      <div class="detail-value">{{ formData.name }}</div>
    </div>
    <div class="detail-row">
      <div class="detail-label">留言分类</div>
      <div class="detail-value">{{ formData.name }}</div>
    </div>



    <!-- 回复内容表单 -->

  </component>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import { Message, Modal, DatePicker } from "@arco-design/web-vue";
import api from "../api/talent";

const emit = defineEmits(["success"]);
// 引用定义
const visible = ref(false);
const loading = ref(false);
const formRef = ref();
const mode = ref("");

let title = computed(() => {
  return "人才详情";
});

// 表单信息
const formData = reactive({
  talent_id: null,
  name: '',
  gender: '',
  contact_number: '',
  birth_date: '',
  domicile: '',
  current_residence: '',
  education_level: '',
  graduation_school: '',
  english_level: '',
  career_intention: '',
  files: [], // 初始化为数组
});

// 验证规则，仅对回复内容相关验证可按需添加
const rules = {};

// 日期格式化函数
const formatDate = (dateStr) => {
  if (!dateStr) return "";
  const date = new Date(dateStr);
  return date.toLocaleString();
};

// 获取状态文本
const getStatusText = (status) => {
  // 这里假设反馈状态 0 为未处理，1 为已处理，可根据实际情况调整
  const statusMap = {
    0: "未处理",
    1: "已处理",
  };
  return statusMap[status] || "未知状态";
};

// 打开弹框
const open = async (type = "add", data = {}) => {
  mode.value = type;
  visible.value = true;
  formRef.value?.resetFields();
  setFormData(data);
  await initPage();
};

// 初始化页面数据
const initPage = async () => {
  // 若后续需要初始化数据，可在此添加逻辑
};

// 设置数据
const setFormData = async (data) => {
  for (const key in formData) {
    if (data[key] !== null && data[key] !== undefined) {
      if (key === 'files' && typeof data[key] === 'string') {
        // 若 files 是 JSON 字符串，先解析为数组
        try {
          formData[key] = JSON.parse(data[key]);
        } catch (e) {
          formData[key] = [];
        }
      } else {
        formData[key] = data[key];
      }
    }
  }
};

// 数据保存
const submit = async (done) => {
  const validate = await formRef.value?.validate();
  // 修正验证逻辑判断
  if (validate) {
    loading.value = true;
    let data = { ...formData };
    let result = {};
    if (mode.value === "add") {
      // 添加数据
      data.feedback_id = undefined;
      result = await api.save(data);
    } else {
      // 修改数据
      result = await api.update(data.feedback_id, data);
    }
    if (result.code === 200) {
      Message.success("操作成功");
      emit("success");
      done(true);
    }
    // 防止连续点击提交
    setTimeout(() => {
      loading.value = false;
    }, 500);
  } else {
    done(false);
  }
};

// 关闭弹窗
const close = () => (visible.value = false);

defineExpose({ open, setFormData });
</script>

<style scoped>
.detail-container {
  padding: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.detail-row {
  display: flex;
  margin-bottom: 15px;
  align-items: center;
}

.detail-label {
  width: 120px;
  font-weight: bold;
}

.detail-value {
  flex: 1;
}

.image-item {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
}

.preview-image {
  max-width: 150px;
  max-height: 150px;
  object-fit: cover;
  border: 1px solid #ddd;
  border-radius: 4px;
}
</style>